<template>
	<div class="Tooltip">
		<el-tooltip placement="top" :disabled="!isShow">
			<template #content>
				<span>
					<slot></slot>
				</span>
			</template>
			<p ref="parent">
				<span ref="child">
					<slot></slot>
				</span>
			</p>
		</el-tooltip>
	</div>
</template>

<script>
export default {
	name: 'Tooltip',
	data() {
		return {
			isShow: true,
		};
	},
	mounted() {
		this.isShow = this.$refs.parent.offsetWidth < this.$refs.child.offsetWidth;
	},
};
</script>
<style lang="scss" scoped>
.Tooltip {
	p {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
</style>
